<template>
  <div>
    <div class="order_choose">
      <div class="order_choose-list" @click="swichNav(index,item.id)" v-for="(item,index) in tags" :key="item.id" >
        <span  :class="[currentTab==index ? 'order_choose_title' : 'order_choose_title_no']">{{item.name}}</span>
        <span :class="[currentTab==index ? 'order_choose_subtitle' : 'order_choose_no_subtitle']">{{item.memo}}</span>
      </div>

    </div>

    <el-carousel @change="bindChange" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item>
        <div class="column_box swiper-box" >
          <row v-if="products.length>0" v-for="item in products" :product="item"></row>
          <noData v-if="products.length===0" style="height: 100%"></noData>
        </div>

      </el-carousel-item>
      <el-carousel-item>
        <div class="column_box swiper-box" >
          <row v-if="products.length>0" v-for="item in products" :product="item"></row>
          <noData v-if="products.length===0" style="height: 100%"></noData>
        </div>

      </el-carousel-item>
      <el-carousel-item>
        <div class="column_box swiper-box" >
          <row v-if="products.length>0" v-for="item in products" :product="item"></row>
          <noData v-if="products.length==0" style="height: 100%"></noData>
        </div>

      </el-carousel-item>
      <el-carousel-item>
        <div class="column_box swiper-box" >
          <row v-if="products.length>0" v-for="item in products" :product="item"></row>
          <noData v-if="products.length==0" style="height: 100%"></noData>
        </div>

      </el-carousel-item>
      <el-carousel-item>
        <div class="column_box swiper-box" >
          <row v-if="products.length>0" v-for="item in products" :product="item"></row>
          <noData v-if="products.length==0" style="height: 100%"></noData>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

  <!--  <swiper current="{{currentTab}}" class="swiper-box" duration="300"  @change="bindChange">-->
  <!--    <swiper-item>-->
  <!--      <div class="column_box">-->
  <!--        <block v-for="item in productList" >-->
  <!--          <column product="{{item}}"></column>-->
  <!--        </block>-->
  <!--      </div>-->
  <!--    </swiper-item>-->
  <!--    <swiper-item>-->
  <!--      <div class="column_box">-->
  <!--        <block v-for="item in productList" >-->
  <!--          <column product="{{item}}"></column>-->
  <!--        </block>-->
  <!--      </div>-->
  <!--    </swiper-item>-->
  <!--    <swiper-item>-->
  <!--      <div class="column_box">-->
  <!--        <block v-for="item in productList">-->
  <!--          <column product="{{item}}"></column>-->
  <!--        </block>-->
  <!--      </div>-->
  <!--    </swiper-item>-->
  <!--    <swiper-item>-->
  <!--      <div class="column_box">-->
  <!--        <block v-for="item in productList">-->
  <!--          <column product="{{item}}"></column>-->
  <!--        </block>-->
  <!--      </div>-->
  <!--    </swiper-item>-->
  <!--    <swiper-item>-->
  <!--      <div class="column_box">-->
  <!--        <block v-for="item in productList">-->
  <!--          <column product="{{item}}"></column>-->
  <!--        </block>-->
  <!--      </div>-->
  <!--    </swiper-item>-->
  <!--  </swiper>-->
</template>

<script>
  import noData from './components/noData'
  import {mapGetters} from 'vuex';
  import row from './components/row'
  import {productList} from "@/api/product"
  import {list as tagList} from '../../../../api/wxTag'
  import utils from '../../../../utils/utils'
  export default {
    name: 'productRow',
    data() {
      return {
        tagIds:[],
        tagId:'',
        pageSize:2,
        pageNum:1,
        tags:[],
        products:[],
        winWidth: 0,
        winHeight: 0,
        currentTab: 0
      }
    },

    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    props:[
      'content'
    ],
    methods:{
      loadTag(){
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i <  this.tagIds.length; i++) {
            this.tagIds[i] = parseInt(this.tagIds[i])
          }
        }
        let params=new URLSearchParams()
        params.append('pageSize',5)
        params.append('pageNum',this.pageNum)
        params.append('type','3')
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagIds',this.tagIds[i])
        }
        tagList(params).then(res=>{
          this.tags=res.data.data
          this.tagId=res.data.data[0].id
        })
        setTimeout(()=>{
          this.loadProduct()
        },1000)

      },
      swichNav(index,id) {
        if (this.currentTab === index) {
          return false;
        } else {
          this.currentTab=index
          this.tagId=id
        }
        setTimeout(()=>{
          this.loadProduct()
        },500)

      },
      bindChange (e) {
        this.currentTab=e
      },
      loadProduct(){
        let params=new URLSearchParams()
        params.append('tagIds',this.tagId)
        params.append('pageSize',this.pageSize)
        params.append('pageNum',this.pageNum)
        productList(params).then(response=>{
          response.data.data.forEach(item=>{
            if (utils.isNull(item.thumbnail)){
              item.thumbnail='http://cdnx.hulu.fj.cn/00/4B/rBD_P13d876ATFO4AAT07C99LBw961.jpg'
            }
          })
          this.products=response.data.data
          console.log(this.products.length)
        })
      }
    },
    created() {

      this.loadTag()
    },
    components:{
      row, noData
    }
  }
</script>

<style scoped>
  page{
    background-color:rgba(248,248,248,0.8);
  }
  .order_choose {
    width: 100%;
    text-align: center;
    /* line-height: 80px; */
    padding-left: 13px;
    padding-right: 13px;
    box-sizing: border-box;
    display: flex;
    /* height: 76px; */
    /*margin-top: 10px;*/
    overflow: hidden;
    margin-bottom: 10px;
  }

  .order_choose-list {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
  }

  .order_choose_title_no {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    display: block;
    line-height: 1;
    padding-bottom: 14px;
    width: 75px;
  }

  .order_choose_title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
    color: rgba(215, 38, 28, 1);
    display: block;
    line-height: 1;
    padding-bottom: 12.5px;
    width: 75px;
  }

  .swiper-box {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .swiper-box view {
    text-align: center;
  }

  .order_choose_line {
    width: 24.5px;
    height: 5px;

    border-radius: 1px;
  }

  .order_choose_line_no{
    background: linear-gradient(0deg, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
  }
  .column_box{

  /*height: 500px;*/
  }
  .order_choose_subtitle{
    font-size: 11px;
    display: block;
    width: 54px;
    height: 20px;
    background: red;
    border-radius: 15px;
    color: white;
    text-align: center;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .order_choose_no_subtitle{
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    width: 54px;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 20px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>
